<template>
  <div ref="print"
       class="transport">
    <div v-for="(element, num) in groupData"
         :key="num">
      <img :src="topImg"
           style="width:80px;height:50px;" />
      <el-form>
        <h4 style="font-family: 宋体; font-size: 16px; margin-top: 0; text-align: center;">脱普公司</h4>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">订单状态:</label>
            <span style="font-size: 13px; margin-left: 20px;">已审核</span>
          </div>
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">打印日期:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ $moment(new Date()).format("YYYY-MM-DD") }}</span>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">发货工厂:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.fromFactory }}</span>
            <label style="font-weight: bold !important; margin-left: 10px;">收货工厂:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.toFactory }}</span>
          </div>
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">页码:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ num + 1 }}/{{ groupData.length }}</span>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">发出库:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.fromHouse }}{{form.fromHouseName}}</span>
          </div>
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">订单日期:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.dateTop }}</span>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;"> 收货库:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.toHouse }}{{form.toHouseName}}</span>
          </div>
          <div style="font-size: 14px; margin: 5px 0; width: 50%;">
            <label style="font-weight: bold !important;">调拨订单号:</label>
            <span style="font-size: 13px; margin-left: 20px;">{{ form.allotNumber || form.contractNo }}</span>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="margin-bottom: 8px; margin: 5px 0; font-size: 14px;">
            <label style="font-weight: bold !important;">送货地址:</label>
            <span style="font-size: 13px;">
              {{ form.toAddress.province }}{{ form.toAddress.city }}{{ form.toAddress.district }}{{ form.toAddress.address }} | {{ form.toAddress.contactName }} | {{form.toAddress.contactMobile}}
            </span>
          </div>
        </div>
      </el-form>
      <hr />
      <table style="width: 100%; font-size: 13px; table-layout: fixed; border-collapse: collapse; margin-top: 10px; border: none;"
             border="1"
             cellspacing="0"
             cellpadding="0">
        <thead style="line-height: 30px; border: 1px solid transparent; word-wrap: break-word; word-break: break-word;">
          <tr>
            <th style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">行项目</div>
            </th>
            <th width="35%"
                style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">料号编号 <br />品名</div>
            </th>
            <th style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">SKU</div>
            </th>
            <th style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">数量</div>
            </th>
            <th style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">采购单位</div>
            </th>
            <th style="border-bottom: 1px solid var(--prev-border-color-grey);">
              <div class="cell">标准包装</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in element"
              :key="index"
              style="height: 70px">
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell">{{ num * 100 + (index + 1) * 10 }}</div>
            </td>
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell"
                   style="text-align:left">
                <!-- {{ item.goodsTerminalGoodsCode }} -->
                <br />
                {{ item.barcode }} / {{ item.chineseName }}
              </div>
            </td>
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell">{{ item.name }}</div>
            </td>
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell">{{ item.qty }}</div>
            </td>
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell">{{ item.extendDoc1 }}</div>
            </td>
            <td style="border: 1px solid transparent; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; height: 55px; padding: 8px 5px; text-align: center; word-break: break-word;">
              <div class="cell">{{ item.spc }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { order, top } from '@/api/index'
import { mapState } from "vuex";
export default {
  name: "TopTrunkLinePrint",
  data () {
    return {
      form: {},
      groupData: [],
      goodsList: []
    };
  },
  computed: {
    ...mapState({
      tenantInfo: (state) => state.tenant.tenantInfo
    }),
    logos () {
      return this.tenantInfo?.config?.logos || [];
    },
    topImg () {
      let src = null
      this.logos?.length && this.logos.forEach(o => {
        if (o.desc == '有色透明logo') {
          src = o.value
        }
      });
      return src || require("@/static/images/d_logo.png")
    }
  },
  created () {
    this.orderId = Number(this.$route.query.orderId);
    this.getDetail();
  },
  methods: {
    async loadTopOrder () {
      let { data } = await top.loadTopOrder({ orderId: this.orderId });
      // let arr = this.goodsList.filter(v => data?.goodsList.some(o => o.goodsId === v.goodsId && o.batchNo === v.batchNo));
      let arr = [];
      if (data) {
        this.form = {
          ...this.form,
          ...data,
          customerNameTop: data?.customerName,
          dateTop: data?.date ? this.$moment(data.date).format("YYYY-MM-DD") : null
        };

        this.goodsList.map((item) => {
          data?.goodsList.map((ele) => {
            if (item.goodsId === ele.goodsId && item.batchNo === ele.batchNo) {
              return arr.push({
                // goodsTerminalGoodsCode: "0102.9032.0003.303",
                barcode: ele.barcode,
                chineseName: ele.chineseName,
                extendDoc1: ele.purchaseUnit,
                ...item
              })
            }
          })
        });
      } else {
        arr = this.goodsList;
      }

      this.groupData = JSON.parse(
        JSON.stringify(this.group(arr, 10))
      );
      this.print();
    },
    async getDetail () {
      let { data } = await order.orderDetailsApi(this.orderId)
      this.form = data;
      this.goodsList = data.goodsList.map(item => {
        return {
          ...item,
          name: item.goodsName,
          spc: item.spec,
          qty: item.quantity,
        }
      });
      this.loadTopOrder();
    },
    group (array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      return newArray;
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
};
</script>
<style lang="scss" scoped>
@media print {
  @page {
    size: auto A4 landscape;
  }
  .transport {
    page-break-after: always;
    width: 100%;
    padding: 0px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
  }
}
@media screen {
  .transport {
    display: none;
  }
}
</style>
